<template>
  <div class="main">
    <top-btns-view  :logo-right="true" class="buttons-header-css" :parentStyle="{
      backgroundColor:'#0E0E0EAA'
    }">
      <template #btnItem>
        <login-status-view @init="loginInit" :focusable="!isPlaying"/>
        <qt-nav-bar class="nav-bar-css" :width="800"
                    name="navBar"
                    ref="navBar"
                    :item-gap="10" size="small"
                    @tab-select="onTabSelect"
        ></qt-nav-bar>
      </template>
    </top-btns-view>
    <GameView ref="game_view" v-if="selectTabId=='1'"
              @gameStateChange="gameStateChange"
    />

  </div>
</template>

<script lang="ts">
import {computed, defineComponent} from "@vue/runtime-core";
import {nextTick, reactive, ref} from "vue";

import EsColumn from "../components/container/EsColumn.vue";
import {
  ESKeyCode,
  ESKeyEvent,
  useESEventBus,
  useESLocalStorage,
  useESLog,
  useESToast
} from "@extscreen/es3-core";
import {useESRouter} from "@extscreen/es3-router";
import EsRow from "../components/container/EsRow.vue";
import {__CONFIG__, apiUrl} from "./config/global";
import LoginStatusView from "./LoginStatusView.vue";

import {getAgreementKey}  from "./config/global";
import {WolfAi} from "./types/WolfAi";
import TopBtnsView from "../components/top-btns-view.vue";
import ThemeConfig from "../build/ThemeConfig";
import GameView from "./GameView.vue";
import {QTINavBar, QTNavBar, QTNavBarItem, QTNavBarItemType} from "@quicktvui/quicktvui3";
export default defineComponent({
  computed: {
    ThemeConfig() {
      return ThemeConfig
    }
  },
  components: {GameView, TopBtnsView, LoginStatusView, EsRow, EsColumn},
  setup() {
    const navBar = ref<QTINavBar>();
    const TAG="Index"
    const router = useESRouter()
    const selectTabId=ref('1')
    let oldInitTabId=''
    const esLocalStorage = useESLocalStorage();
    const game_view = ref()
    const isPlaying = ref(false)
    let realTabItems:Array<QTNavBarItem>=[]

    function onBackPressed() {
      console.log('onBackPressed')
      if (isPlaying.value) {
        isPlaying.value=false
        game_view.value.onBackPressed()
      } else {
        router.back()
      }
    }
    function loginInit() {
      if (__CONFIG__.userInfoObj && __CONFIG__.userInfoObj.userId) {
        game_view.value.getMeRank()
      }
    }

    const onTabSelect=(e)=>{
      console.log('onTabSelect',e)
      if(realTabItems.length>0){
        selectTabId.value=realTabItems[e.position]._id!
        debounce(game_view.value.getMeRank,1000)();
        debounce(game_view.value.getRankList,1000)();
      }
    }
    const initTab=(initTabId)=>{
      let tabItems=[
        {
          _id:'1',
          type: QTNavBarItemType.QT_NAV_BAR_ITEM_TYPE_TEXT,
          text: '人机' ,
          titleSize: 20,
          decoration: {
            left: 20,
            right: 20,
          },
        },
        // {
        //   _id:'2',
        //   type: QTNavBarItemType.QT_NAV_BAR_ITEM_TYPE_TEXT,
        //   text: '匹配' ,
        //   titleSize: 20,
        //   decoration: {
        //     left: 20,
        //     right: 20,
        //   },
        // }
      ]
      if (initTabId=='1'){
        realTabItems=tabItems
      }else if(initTabId=='2'){
        realTabItems=[tabItems[1],tabItems[0]]
      }
      const horizontalNavBar: QTNavBar = {
        data: realTabItems,
      };
      console.log('navBarItem',horizontalNavBar)
      navBar.value?.init(horizontalNavBar);
      selectTabId.value=initTabId
    }
    const onESResume=async ()=>{
      console.log('onESResume')
      let initTabId=await esLocalStorage.getString(__CONFIG__.packageName+":selectTabId","1")
      console.log(`initTabId:${initTabId} selectTabId:${selectTabId.value}`)
      if (initTabId!=oldInitTabId){
        initTab(initTabId)
        oldInitTabId=initTabId
      }
    }
    function debounce(func, wait) {
      let timeout;
      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
      };
    }
    const onESCreate = async () => {
      console.log('onESCreate')
      let initTabId=await esLocalStorage.getString(__CONFIG__.packageName+":selectTabId","1")
      oldInitTabId=initTabId
      initTab(initTabId)
      debounce(game_view.value.getMeRank,1000)();
      debounce(game_view.value.getRankList,1000)();
      game_view.value.requestFocus()
    }
    function gameStateChange(_isPlaying){
      console.log('isPlaying',_isPlaying)
      isPlaying.value=_isPlaying
    }
    return {
      onESCreate,
      isPlaying,
      onBackPressed,
      loginInit,
      onTabSelect,
      game_view,
      onESResume,
      gameStateChange,
      selectTabId,
      navBar
    }
  }
});
</script>

<style scoped>
.main {
  width: 1920px;
  height: 1080px;
  background-color: #EAEDEF;
}

.buttons-header-css{
  position: relative;
  width: 1920px;
  height: 80px;
  background-color: transparent;
}
</style>
